<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <MenuDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { ref } from "vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { getMenuList, addMenu, editMenu, deleteMenu } from "@/api/modules/menu";
import MenuDrawer from "@/views/proTable/components/MenuDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useAuthStore } from "@/stores/modules/auth";

const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps<Menu.MenuOptions>[] = [
  { prop: "meta.title", label: "菜单名称", align: "left", search: { el: "input" } },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name", search: { el: "input" } },
  { prop: "path", label: "菜单路径", width: 300, search: { el: "input" } },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "redirect", label: "重定向" },
  { prop: "meta.activeMenu", label: "活动菜单" },
  { prop: "meta.isLink", label: "是否链接" },
  { prop: "meta.isHide", label: "是否隐藏" },
  { prop: "meta.isFull", label: "是否铺满" },
  { prop: "meta.isAffix", label: "是否Affix" },
  { prop: "meta.isKeepAlive", label: "是否高亮" },
  { prop: "operation", label: "操作", width: 165, fixed: "right" }
];

const dataCallback = (data: any) => {
  console.log(data);
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const getTableList = (params: any) => {
  console.log(params);
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getMenuList(newParams);
};

const authStore = useAuthStore();

const deleteAccount = async (params: Menu.MenuOptions) => {
  await useHandleData(deleteMenu, { id: [params.id] }, `删除【${params.meta.title}】菜单，及其子集菜单`);
  await authStore.getAuthMenuList();
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof MenuDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Menu.MenuOptions> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: {
      id: row.id,
      parentId: row.parentId,
      title: row.meta?.title,
      icon: row.meta?.icon,
      name: row.name,
      path: row.path,
      component: row.component,
      redirect: row.redirect,
      activeMenu: row.meta?.activeMenu,
      isLink: row.meta?.isLink,
      isHide: row.meta?.isHide,
      isFull: row.meta?.isFull,
      isAffix: row.meta?.isAffix,
      isKeepAlive: row.meta?.isKeepAlive,
      authButtons: row.authButtons
    },
    api: title === "新增" ? addMenu : title === "编辑" ? editMenu : undefined,
    getTableList: proTable.value?.getTableList
  };
  console.log(drawerRef);
  drawerRef.value?.acceptParams(params);
};
</script>
